<template>
  <div class="article_add">
    <el-header class="top">
      <i class="el-icon-s-home"></i>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/' }">文章管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加文章</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>

    <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>添加文章</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
       
        <!-- 卡片组件的内容-添加表单 -->
        <el-form ref="addForm" :model="arc" label-width="80px" :rules="formRules" >

            <el-form-item label="标题" prop="title">
              <el-input v-model="arc.title" style="width:300px" placeholder="输入文章标题"></el-input>
            </el-form-item>

            <el-form-item label="子标题" prop="sub_title">
              <el-input v-model="arc.sub_title"></el-input>
            </el-form-item>

            <el-form-item label="分类" prop="cate_id">
              <el-select v-model="arc.cate_id" placeholder="请选择活动区域">
                <el-option label="分类1" :value="1"></el-option>
                <el-option label="分类2" :value="2"></el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item label="内容" prop="content">
              <el-input type="textarea" v-model="arc.content" placeholder="输入文章内容"
              rows="5"
              :show-word-limit="true"
              ></el-input>
            </el-form-item>

            <el-form-item label="浏览">
              <el-input v-model="arc.view"></el-input>
            </el-form-item>

            <el-form-item label="点赞">
              <el-input v-model="arc.like"></el-input>
            </el-form-item>

            <el-form-item label="推荐首页">
              <el-checkbox label="是" name="type" v-model="arc.recommend"></el-checkbox>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit('addForm')">添加</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>

        </el-form>

    </el-card>
  </div>
</template>

<script>
  import http from '../utils/http';

  export default {
    data(){
      return {
        //把表单数据放一个对象中
        arc:{
          title:"",
          sub_title:"",
          cate_id:1,//指写某个值，让默认选中
          content:"",
          view:0,
          like:0,
          recommend:false  //如果只有一个复选框，true/false 来控制选中或未选中
        },
        //验证规则
        formRules:{
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' },
            { min: 3, max: 30, message: '长度在 3 到30个字符', trigger: 'blur' }
          ],
          sub_title: [
            { required: true, message: '请输入子标题', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到20个字符', trigger: 'blur' }
          ],
          cate_id: [
            { required: true, message: '请选择分类', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 10, message: '最少10个字', trigger: 'blur' }
          ]
        }
      }
    },
    methods:{
      onSubmit(formName){
        console.log("提交表单")
        //  this.$refs[formName] 获取表单
        // this.$refs[formName].validate 调用表单验证方法，告诉我们验证是否通过
        this.$refs[formName].validate(async (valid)=>{
          console.log(valid) //true 通过
          
          // 通过axios请求后端，把数据发给别个，让别个保存起来。
          if(valid){
              let res = await http.post("/api/article/article_add",{
                    title:this.arc.title,
                    sub_title:this.arc.sub_title,
                    cate_id:this.arc.cate_id,//指写某个值，让默认选中
                    content:this.arc.content,
                    view:this.arc.view,
                    like:this.arc.like,
                    recommend:this.arc.recommend==true ? 1 : 0
                  }
              )
              console.log(res)

              // 成功
              if(res.data.code == 0){
                // Message 消息提示
                this.$message({
                  type:"success",
                  message:"添加成功"
                })
                //重置表单
                this.resetForm();

              }else{
                this.$message({
                  type:"error",
                  message:res.data.msg
                })
              }
          }else{
            //没有通过验证，给用户一个提示
            this.$message({
              type:"warning",
              message:"请按要求，完整填写表单!"
            })
          }
        });
      },
      resetForm(){
        this.$refs.addForm.resetFields();
        //没有验证的表单元素不会被重置，哪我们就手动重置。
        this.arc.view=0;
        this.arc.like=0;
        this.arc.recommend=false
      }
    }
  }
</script>

<style lang="less" scoped>
.article_add{
  // margin:15px;
  
  // /deep/ 深度选择器，可以重置组件内置的样式。别忘了样式要加scoped，
  // 有可能还需要!important来提升样式的优先级。
  /deep/.el-header {
    display: flex;
    align-items: center;
    height: 62px !important;
    background: #edebeb;

    .el-icon-s-home {
      color: #000000;
      font-size: 20px;
    }

    .el-breadcrumb {
      height: 35px;
      display: flex;
      align-items: center;
      margin-bottom: 0;
      font-size: 12px;
    }
  }

  .box-card{
    margin: 10px;
  }
}
</style>